{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if @backend}}
  {{#if this.formErrors}}
    <Hds::Alert data-test-keymgmt-distribute-error @type="inline" @color="critical" as |A|>
      <A.Title>Error</A.Title>
      <A.Description>{{this.formErrors}}</A.Description>
    </Hds::Alert>
  {{/if}}
  <form {{on "submit" (perform this.createDistribution)}} class="form-section" data-test-keymgmt-distribution-form>
    {{#unless @key}}
      <div class="field" data-test-keymgmt-dist-key>
        <SearchSelect
          @id="key"
          @models={{array "keymgmt/key"}}
          @onChange={{this.handleKeySelect}}
          @passObject={{true}}
          @inputValue={{this.formData.key}}
          @subText="Type to use the name of an existing key that you’d like to add to this provider, or to create one."
          @wildcardLabel="key"
          @label="Key name"
          @fallbackComponent="string-list"
          @selectLimit="1"
          @backend={{@backend}}
          @disallowNewItems={{false}}
        >
          {{#if (and this.validMatchError.key (not this.isNewKey))}}
            <Hds::Alert class="has-top-margin-s" @type="inline" @color="warning" data-test-keymgmt-error="key" as |A|>
              <A.Description>
                {{this.validMatchError.key}}
                To check compatibility,
                <Hds::Link::Inline
                  @icon="docs-link"
                  @iconPosition="trailing"
                  @isHrefExternal={{true}}
                  @href={{doc-link "/vault/docs/secrets/key-management#compatibility"}}
                >
                  refer to this table
                </Hds::Link::Inline>.
              </A.Description>
            </Hds::Alert>
          {{/if}}
        </SearchSelect>
      </div>
    {{/unless}}

    {{#if this.isNewKey}}
      <div class="field">
        <label class="is-label" for="keyType">Key Type</label>
        <p class="sub-text">The type of cryptographic key that will be created.</p>
        <div class="control is-expanded">
          <div class="select is-fullwidth">
            <select
              name="keyType"
              id="keyType"
              {{on "change" this.handleKeyType}}
              class={{if this.validMatchError.key "has-error-border"}}
              data-test-keymgmt-dist-keytype
            >
              <option value="">
                Select one
              </option>
              {{#each this.keyTypes as |val|}}
                <option selected={{eq this.keyType val}} value={{val}}>
                  {{val}}
                </option>
              {{/each}}
            </select>
          </div>
          {{#if this.validMatchError.key}}
            <Hds::Alert class="has-top-margin-s" @type="inline" @color="warning" data-test-keymgmt-error="new-key" as |A|>
              <A.Description>
                {{this.validMatchError.key}}
                To check compatibility,
                <Hds::Link::Inline
                  @icon="docs-link"
                  @iconPosition="trailing"
                  @isHrefExternal={{true}}
                  @href={{doc-link "/vault/docs/secrets/key-management#compatibility"}}
                >
                  refer to this table
                </Hds::Link::Inline>.
              </A.Description>
            </Hds::Alert>
          {{/if}}
        </div>
      </div>
    {{/if}}

    {{#unless @provider}}
      <div class="field">
        <SearchSelect
          @id="provider"
          @models={{array "keymgmt/provider"}}
          @onChange={{this.handleProvider}}
          @passObject={{false}}
          @inputValue={{this.formData.provider}}
          @subText="Select a provider in Vault. If it doesn’t exist yet, you’ll need to add it first."
          @label="Provider"
          @fallbackComponent="input-search"
          @selectLimit="1"
          @backend={{@backend}}
          @disallowNewItems={{true}}
          data-test-keymgmt-dist-provider
        >
          {{#if this.validMatchError.provider}}
            <Hds::Alert class="has-top-margin-s" @type="inline" @color="warning" data-test-keymgmt-error="provider" as |A|>
              <A.Description>
                {{this.validMatchError.provider}}
                To check compatibility,
                <Hds::Link::Inline
                  @icon="docs-link"
                  @iconPosition="trailing"
                  @isHrefExternal={{true}}
                  @href={{doc-link "/vault/docs/secrets/key-management#compatibility"}}
                >
                  refer to this table
                </Hds::Link::Inline>.
              </A.Description>
            </Hds::Alert>
          {{/if}}
        </SearchSelect>
      </div>
    {{/unless}}

    <fieldset
      class="field form-fieldset"
      id="operations"
      disabled={{this.disableOperations}}
      data-test-keymgmt-dist-operations
    >
      <legend class="is-label">Operations</legend>
      <p class="sub-text">The types of operations this key can perform in the provider.</p>
      {{#each this.operations as |op|}}
        <div class="b-checkbox">
          <Input
            @type="checkbox"
            id={{op}}
            class="styled"
            @checked={{false}}
            {{on "input" this.handleOperation}}
            data-test-operation={{op}}
          />
          <label for={{op}}>{{capitalize op}}</label>
        </div>
      {{/each}}
    </fieldset>

    <fieldset class="field form-fieldset" id="protection" data-test-keymgmt-dist-protections>
      <legend class="is-label">Protection</legend>
      <p class="sub-text">Specifies the protection of the key.</p>
      <div>
        <RadioButton
          id="protection-hsm"
          name="hsm"
          class="radio"
          data-test-protection="hsm"
          @value="hsm"
          @groupValue={{this.formData.protection}}
          @onChange={{fn (mut this.formData.protection)}}
        />
        <label for="protection-hsm">HSM</label>
      </div>
      <div>
        <RadioButton
          id="protection-software"
          name="software"
          class="radio"
          data-test-protection="software"
          @value="software"
          @groupValue={{this.formData.protection}}
          @onChange={{fn (mut this.formData.protection)}}
        />
        <label for="protection-software">Software</label>
      </div>
    </fieldset>

    <hr class="has-background-gray-100" />
    <Hds::ButtonSet>
      <Hds::Button
        @text={{if (or (not @key) this.isNewKey) "Add key" "Distribute key"}}
        @icon={{if this.createDistribution.isRunning "loading"}}
        type="submit"
        data-test-secret-save
        disabled={{this.createDistribution.isRunning}}
      />
      <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onClose}} />
    </Hds::ButtonSet>
  </form>
{{/if}}